<template>
	<view class="" style="background-color: #d70127;">
		<view class="content">
			<view class="headers">
				<view class="number" style="display: flex;justify-content: space-between;">
					<view class="" style="display: flex;margin-top: 20rpx;">
						<view class="" style="font-size: 36rpx;color: #FDE8CE;">
							<view class=""> 可提现金额 </view>
							<view class="" style="text-align: center;">
								{{canMoney.memberTakeableIncomeAmount}}
							</view>
						</view>
						<view class="" style="font-size: 36rpx;color: #FDE8CE;margin-left: 50rpx;">
							<view class=""> 锁定金额 </view>
							<view class="" style="text-align: center;">
								{{canMoney.memberTakeableIncomeAmountLocked}}
							</view>
						</view>
					</view>
					<!-- <view class="record" @click="withRecord"> 提现记录 </view> -->
				</view>
			</view>
			<view class="main">
				<view class="labname"> 提现金额:<text
						style="color: yellow;margin: 0 20rpx;">{{takeIncome?takeIncome:0}}</text>元</view>
				<view class="" style="display: flex;flex-wrap: wrap;margin: 50rpx 0;">
					<view class="" v-for="(item,index) in speLists" :key="index"
						style="width:33%;text-align: center;border: 1px solid #fff;padding: 20rpx 0;color: yellow;"
						@click="editTakeIncome(item.amount)"> {{item.amount}} </view>
					<view style="width:33%;text-align: center;border: 1px solid #fff;padding: 20rpx 0;color: yellow;">
						<input type="test" v-model="takeIncomeDiy" placeholder="自定义"
							placeholder-class="placeholderStyle" @input="input" />
					</view>
				</view>
				<!-- <view class="" style="color: red;margin:20rpx 0;"> (单笔提现金额范围0.1-200元)</view> -->
				<view class="formItem" style="border-bottom: 1px solid #ccc;height: 80rpx;line-height: 80rpx;">
					<view class="labname"> 真实姓名 </view>
					<view class="must">
						<input type="text" v-model="name" placeholder="请输入真实姓名" style="height: 80rpx;"
							placeholder-class="placeholderStyle" />
					</view>
				</view>
				<u-radio-group v-model="radiovalue1" placement="row" style="margin-top: 20rpx;">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.type" @change="radioChange" style="margin-left: 50rpx;">
					</u-radio>
				</u-radio-group>
				<view class="formItem" v-if="radiovalue1=='1'||radiovalue1=='0'">
					<view class="labname"> 收款码 </view>
					<view class="must" @click="chooseImage">
						<image v-if="imageUrl" :src="imageUrl" mode="widthFix">
						</image>
						<image src="/static/image/qrCode.png" v-else mode="widthFix"></image>
					</view>
				</view>
				<view class="formItem" v-if="radiovalue1=='1'">
					<view class="labname"> 收款账号 </view>
					<view class="must">
						<input type="text" v-model="aliAccount" placeholder="请输入收款账号"
							placeholder-class="placeholderStyle" />
					</view>
				</view>
				<view class="formItem" v-if="radiovalue1=='2'">
					<view class="labname"> 开户行 </view>
					<view class="must">
						<input type="text" v-model="bankAccount" placeholder="请输入开户行"
							placeholder-class="placeholderStyle" />
					</view>
				</view>
				<view class="formItem" v-if="radiovalue1=='2'" style="margin-top: 20rpx;">
					<view class="labname"> 银行账号 </view>
					<view class="must">
						<input type="text" v-model="idCard" placeholder="请输入银行账号"
							placeholder-class="placeholderStyle" />
					</view>
				</view>
				<button @click="handleTakeincome">申请提现</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		userAmount,
		askTakeIncome,
		getOne,
		speList
	} from '../request/api.js'
	export default {
		data() {
			return {
				takeIncome: '',
				takeIncomeDiy: '',
				aliAccount: "",
				bankAccount: "",
				idCard: "",
				aliName: "",
				imageUrl: "",
				name: '',
				freezeMoney: 0,
				canMoney: '',
				// 基本案列数据
				radiolist1: [{
					name: '微信',
					disabled: false,
					type: '0'
				}, {
					name: '支付宝',
					disabled: false,
					type: '1'
				}, {
					name: '银行卡',
					disabled: false,
					type: '2'
				}],
				radiovalue1: '0',
				fee: '',
				speLists: []
			};
		},
		onLoad() {
			this.getUserAmount();
			this.getFee()
			this.getSpeList()
		},
		methods: {
			input(event) {
				this.takeIncome = event.target.value
			},
			//提现规格列表
			getSpeList() {
				speList().then(res => {
					if (res.code == 200) {
						this.speLists = res.result.records;
					}
				})
			},
			// 选择提现金额
			editTakeIncome(e) {
				this.takeIncome = e;
			},
			getFee() {
				getOne({
					keyStr: 'handling_fee'
				}).then(res => {
					if (res.code == 200) {
						this.fee = res.result.valueStr;
					}
				})
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res)
						this.uploadImage(res.tempFilePaths[0])
					}
				})
			},
			uploadImage(url) {
				uni.uploadFile({
					url: 'https://api.wdjlm.cn/jeecg-boot/sys/common/upload',
					filePath: url,
					name: 'file',
					header: {
						'X-Access-Token': uni.getStorageSync('token')
					},
					success: (res) => {
						const result = JSON.parse(res.data).message
						this.imageUrl = result
						console.log(this.imageUrl)
					},
					fail: (res) => {
						uni.showToast({
							title: "上传失败",
							icon: "none",
							duration: 1000,
						})
					}
				})
			},
			handleTakeincome() {
				let that = this;
				console.log(that.takeIncome * 0.05);
				if (that.name == "") {
					uni.showToast({
						title: "请输入真实姓名",
						icon: "none",
						duration: 1000,
					})
					return
				}
				if (Number(that.takeIncome * 0.05) > Number(that.canMoney)) {
					uni.showToast({
						title: "请输入正确提现金额",
						icon: "none",
						duration: 1000,
					})
					return
				}
				if (that.imageUrl == "" && that.radiovalue1 != '2') {
					uni.showToast({
						title: "请上传收款码",
						icon: "none",
						duration: 1000,
					})
					return
				}
				if (that.aliAccount == "" && that.radiovalue1 == '1') {
					uni.showToast({
						title: "请输入收款账号",
						icon: "none",
						duration: 1000,
					})
					return
				}
				if (that.bankAccount == "" && that.radiovalue1 == '2') {
					uni.showToast({
						title: "请输入开户行",
						icon: "none",
						duration: 1000,
					})
					return
				}
				if (that.idCard == "" && that.radiovalue1 == '2') {
					uni.showToast({
						title: "请输入银行账号",
						icon: "none",
						duration: 1000,
					})
					return
				}
				let par = {}
				let takeIncome = Math.floor(that.takeIncome * that.fee * 100) / 100;
				if (that.radiovalue1 == '0') {
					par = {
						name: that.name,
						memberId: uni.getStorageSync('userInfo').id,
						takeIncome: takeIncome,
						image: that.imageUrl,
						type: that.radiovalue1
					}
				} else if (that.radiovalue1 == '1') {
					par = {
						name: that.name,
						memberId: uni.getStorageSync('userInfo').id,
						takeIncome: takeIncome,
						image: that.imageUrl,
						aliAccount: that.aliAccount,
						type: that.radiovalue1
					}
				} else {
					par = {
						name: that.name,
						memberId: uni.getStorageSync('userInfo').id,
						takeIncome: takeIncome,
						idCard: that.idCard,
						bankAccount: that.bankAccount,
						type: that.radiovalue1
					}
				}
				askTakeIncome(par).then(res => {
					if (res.code == 200) {
						console.log(res.result);
						uni.showToast({
							title: res.result,
							icon: "none"
						})
						setTimeout(() => {
							that.takeIncome = '';
							that.aliAccount = '';
							that.name = '';
							that.imageUrl = '';
							that.idCard = '';
							that.bankAccount = '';
							that.takeIncomeDiy = ''
							that.getUserAmount();
						}, 1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			getUserAmount() {
				let that = this;
				userAmount({
					userId: uni.getStorageSync('userInfo').id,
				}).then(res => {
					if (res.code == 200 && res.result) {
						that.canMoney = res.result
						// this.mainData.freezeMoney = res.result.freezeMoney
						// this.mainData.incomeAmount = res.result.incomeAmount
					}
				})
			},
			// withRecord() {
			// 	uni.navigateTo({
			// 		url: "./withRecord"
			// 	})
			// }
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		height: 100vh;
		background: url('/static/image/bg.png') no-repeat center center;
		background-size: 100% 100%;
		overflow: hidden;
		padding: 100rpx 30rpx;

		.headers {
			.title {
				font-size: 32rpx;
			}

			.number {
				font-size: 56rpx;
				display: flex;
				justify-content: space-between;
				vertical-align: top;

				.record {
					width: 340rpx;
					height: 100rpx;
					border-radius: 44rpx;
					background: #FFFFFF;
					text-align: left;
					line-height: 100rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					font-size: 32rpx;
					vertical-align: top;

					image {
						width: 16rpx;
						float: right;
						position: relative;
						top: 35rpx
					}
				}
			}
		}

		.main {
			margin: 150rpx 14rpx;
			border-radius: 44rpx;
			background: #d70127;
			padding: 40rpx;
			color: #FDE8CE;

			.title {
				font-size: 32rpx;
			}

			.inputnum {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;
				height: 80rpx;
				line-height: 80rpx;

				.left {

					// display: flex;
					.pant {
						font-size: 48rpx;
						display: inline-block;
						vertical-align: middle;
					}

					input {
						font-size: 32rpx;
						margin-left: 20rpx;
						display: inline-block;
						vertical-align: middle;
					}
				}

				.allbtn {
					font-size: 32rpx;
				}
			}

			.formItem {
				display: flex;
				justify-content: space-between;
				line-height: 50rpx;
				margin-top: 10rpx;

				.must {
					image {
						width: 45rpx;
						height: 45rpx;
					}

					input {
						text-align: right;
					}
				}
			}

			.message {
				font-size: 32rpx;
				color: #3D3D3D;
				margin-top: 20rpx;
			}

			button {
				margin: 30rpx 80rpx;
				background: #FDE8CE;
				color: #1C1A1F;
				border-radius: 20rpx;
				font-size: 32rpx;
			}
		}

		.withmsg {
			// width: 722rpx;
			margin-top: 30rpx;
			margin: 16rpx;
			height: 290rpx;
			border-radius: 42rpx;
			background: #FFFFFF;
			text-align: center;
			font-size: 32rpx;
		}
	}

	.placeholderStyle {
		color: #FDE8CE;
		font-size: 32rpx;
	}
</style>